<template>
  <div v-loading="loading" class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="功能模块" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入" clearable />
      </el-form-item> -->
      <el-form-item label="用户" prop="userId">
          <virtual-select
            v-model="queryParams.userId"
            :list="allUsers"
            label="nickName"
            value="userId"
            :placeholder="'输入关键字用于搜索用户'"
            :keeps-params="20"
            :is-concat="false"
            :concat-symbol="' || '"
            :is-multiple="false"
            :disabled="false"
            :allow-create="false"
          />
        </el-form-item>
      <el-form-item label="时间" prop="">
          <el-date-picker
              style="width: 300px"
              v-model="timer"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
        </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" type="warning" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table stripe :data="tableData.records" style="width: 100%">
        <el-table-column label="店铺" prop="tenantName" />
        <el-table-column label="时间" prop="operTime" width="160"/>
        <el-table-column label="用户" prop="userNickname" />

        <el-table-column label="功能模块" prop="title"></el-table-column>
        <el-table-column label="描述" prop="des" />
        
        <!-- <el-table-column label="IP" prop="operIp" />
        <el-table-column label="IP归属" prop="operLocation" /> -->
        <!-- <el-table-column label="接口参数" prop="operParam" min-width="150" show-overflow-tooltip/>
        <el-table-column label="返回结果" prop="jsonResult" min-width="100" show-overflow-tooltip/> -->
      </el-table>
      <div class="pages-box">
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>

  </div>
</template>
<script>
import {getTenantOperLog} from "@/api/system/caozuojilu.js"
import supplyConfigApi from "@/api/system/supplyConfig"
import VirtualSelect from "@/components/VirtualSelect.vue";
export default {
  name: "Caozuojilu",
  components:{VirtualSelect},
  data() {
    return {
      loading: false,
      timer:[],
      tableData: {
        records: [],
        total: 0,
      },
      allUsers:[],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        title:'',
        userId:''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getAllUserList()
    this.getList();
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList
    }
  },
  methods: {
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.operTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.operTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.operTimeStart = "";
        this.queryParams.operTimeEnd = "";
      }
      getTenantOperLog(this.queryParams)
        .then((response) => {
          this.loading = false;
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
     // 所有用户
     getAllUserList(val) {
      supplyConfigApi.getAllUserList().then(res => {
        this.allUsers = res.rows
      })
    },
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.timer = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        title: "",
        userId:''
      };
      this.getList();
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="css">
</style>
